var TabCon = function () {
    var $con;
    this.init = function (config) {
        $con = initView(config.conid);
        initTabView(config.tabs);
        initListView(config.items);
        bindEvent(function (showtext, id) {
            this.hide;
            if (config.itemListener)
                config.itemListener(showtext, id);
        });
        //第一个tab默认选中
        $(".tabs li").first().trigger('click');
    };
    this.hide = function () {
        $con.hide(0);
    };
    this.show = function () {
        $con.show(0);
    };
}


/**
 * 初始化初始容器
 * @param fid
 */
function initView(fid) {
    var $con = $("<div class='tab-con'></div>");
    var $tabs = $("<ul id='tabs' class='tabs'></ul>");
    var $items = $("<ul id='tab-items' class='tab-items'></ul>");
    $con.append($tabs).append($items);
    $('#' + fid).append($con);
    return $con;
}
/**
 * 初始化tabs
 */
function initTabView(tabs) {
    $.each(tabs, function (n, tab) {
        $("#tabs").append("<li data-class='" + tab.dataclass + "'>" + tab.showText + "</li>");
    });
    $(".tabs li").css("width", (1 / tabs.length)*100+"%");
}
/**
 * 初始化list
 */
function initListView(items) {
    $.each(items, function (n, item) {
        $('#tab-items').append("<li data-id='" + item.id + "' data-name='" + item.name + "' class='" + item.index + "'>" + item.name + "</li>");
    });
}

/**
 * 初始化视图的相关css及事件绑定
 */
function bindEvent(itemlistener) {

    $(".tabs li").click(function () {
        $(".in").removeClass("in");
        var _this = $(this);
        var c = _this.attr("data-class");
        _this.addClass("in");
        $(c).addClass("in");
    });

    $(".tab-items li").click(function () {
        var _this = $(this);
        var t = _this.attr("data-name");
        var cid = _this.attr("data-id");
        if (itemlistener)
            itemlistener(t, cid);
    })
};


